<template>
	<view>
		<!-- 详情页面 -->
		<!-- 头部导航 -->
		  <uni-nav-bar background-color="#3286ed" :statusBar="true"  :fixed="true" color="#fff" title="回库申请详情" left-icon="left"  
		   @clickLeft="backFn"   ></uni-nav-bar>
		   
		   <view @click="getinfo(index,item)"  class="application" v-for="(item,index) in list" :key="item.id">
				<view style="border: solid 1px #c3c3c3;margin-bottom: 5px; position: relative;">
					<view class="application_one">
					   <view style="font-weight: 600;">{{item.returnApplyNo}}</view>
					   <view  class="title">租赁销售订单：{{item.orderNo}}</view>
					   <view  class="title" style="display: flex;justify-content: space-between;">
						   <view>客户名称：{{item.customerName}}</view>
						   <view  style="color: #fd9540;" @click="updateLogistics(item)">添加物流</view>
					   </view>
					 <view class="status" style="position: absolute;top: 10px;right:10px;color: #fd9540;font-size: 14px;">
					 	<view v-if="item.expensesStatus=='1'">物流已完成</view>
					 	<view v-if="item.expensesStatus=='2'">物流未完成</view>
					 </view>
					</view>
					<view class="Buttom">
						<view class="left" style="border-right: solid 1px #c3c3c3;">
							<uni-icons class="icon" size="24" color="#fd9540" type="person-filled"></uni-icons> 
							<span class="name">{{item.sponsorName}}</span>
						</view>
						<view class="left">
							<uni-icons class="icon" size="24" color="#55aaff" type="calendar-filled"></uni-icons>
							<span class="name" >{{item.customerName}}</span>
						</view>
					</view>
				</view>
		   </view>
		   <!-- tab切换 -->
		     <view v-if="list.length!==0" style="margin-top: 10px;">
				 <u-tabs :list="tablist" class="tabs" lineColor="#fd9540" lineWidth="85px" :activeStyle="{ color: '#fd9540', fontWeight: 'bold', transform: 'scale(1.05)'}":current="index"   @change="changeFn" ></u-tabs>
				 					<!-- tabs展示数据 -->
				 					 	<u--form labelPosition="left" class='orderdetails' labelWi	  ref="form1">
				 							<view class="box" v-if="index*1===0">
				 								<u-cell>
				 									<template #title>
				 										<view style="color:#ccc" class="u-cell-text">基本信息</view>
				 									</template>
				 								</u-cell>
				 								<u-cell-group>
													<!-- <u-cell>
														<view  slot="title" class="u-slot-title">
															<text class="u-cell-text">租赁订单日租金合计金额</text>
															<text class="u-cell-text">{{basinfo.totalDailyRent}}</text>
														</view>
													</u-cell> -->
				 									<u-cell>
				 										<view  slot="title" class="u-slot-title">
				 											<text class="u-cell-text">回货单编号</text>
				 											<text class="u-cell-text">{{basinfo.returnApplyNo}}</text>
				 										</view>
				 									</u-cell>
				 									<u-cell>
				 										<view  slot="title" class="u-slot-title">
				 											<text class="u-cell-text">回货/退货类型</text>
				 											<text class="u-cell-text" v-if="basinfo.returnType=='1'">回货</text>
				 											<text class="u-cell-text" v-if="basinfo.returnType=='2'">退货</text>
				 										</view>
				 									</u-cell>
				 									<u-cell>
				 										<view  slot="title" class="u-slot-title">
				 											<text class="u-cell-text">发起人</text>
				 											<text class="u-cell-text">{{basinfo.sponsorName}}</text>
				 										</view>
				 									</u-cell>
				 									<u-cell>
				 										<view  slot="title" class="u-slot-title">
				 											<text class="u-cell-text">租赁销售订单</text>
				 											<text class="u-cell-text">{{basinfo.orderNo}}</text>
				 										</view>
				 									</u-cell>
													
				 									<u-cell>
				 										<view  slot="title" class="u-slot-title">
				 											<text class="u-cell-text">装货地址</text>
				 											<text class="u-cell-text">{{basinfo.loadingAddress}}</text>
				 										</view>
				 									</u-cell>
				 								</u-cell-group>
				 								<u-cell>
				 									<template #title>
				 										<view style="color:#ccc" class="u-cell-text">回货产品</view>
				 									</template>
				 								</u-cell>
				 								<uni-table border stripe emptyText="回货产品" >
				 									<!-- 表头行 -->
				 									<uni-tr>
				 										<!-- <uni-th align="center">序号</uni-th> -->
				 										<!-- <uni-th align="center">产品名称</uni-th> -->
				 										<uni-th width="100px" align="center">型号</uni-th>
				 										<!-- <uni-th align="center">产品编号</uni-th> -->
				 										<uni-th align="center">数量</uni-th>
				 										<!-- <uni-th align="center">价格</uni-th> -->
				 										<!-- <uni-th align="center">金额小计</uni-th> -->
				 										<!-- <uni-th align="center">出库单标号</uni-th> -->
				 										<uni-th align="center">备注</uni-th>
				 									</uni-tr>
				 									<!-- 表格数据行 -->
				 									<uni-tr v-for="(item,index) in basinfo.productList">
				 										<!-- <uni-td align="center">{{index}}</uni-td> -->
				 										<!-- <uni-td align="center">{{item.productName}}</uni-td> -->
				 										<uni-td align="center">{{item.model}}</uni-td>
				 										<!-- <uni-td align="center">{{item.productNo}}</uni-td> -->
				 										<uni-td align="center">{{item.returnQuantity}}</uni-td>
				 										<!-- <uni-td align="center">{{item.price}}</uni-td> -->
				 										<!-- <uni-td align="center">{{item.allPrice}}</uni-td> -->
				 										<!-- <uni-td align="center">{{item.outboundNo}}</uni-td> -->
				 										<uni-td align="center">{{item.remark}}</uni-td>
				 									</uni-tr>
				 									 
				 								
				 								</uni-table>
				 								<!-- 回货信息 -->
				 						          <u-cell>
				 									<template #title>
				 										<view style="color:#ccc" class="u-cell-text">回货信息</view>
				 									</template>
				 								</u-cell>
				 								<u-cell-group>
													<u-cell>
														<view  slot="title" class="u-slot-title">
															<text class="u-cell-text">对接人</text>
															<text class="u-cell-text">{{basinfo.contactName}}</text>
														</view>
													</u-cell>
													<u-cell>
														<view  slot="title" class="u-slot-title">
															<text class="u-cell-text">对接人联系电话</text>
															<text class="u-cell-text">{{basinfo.contactTelephone}}</text>
														</view>
													</u-cell>
				 									<u-cell>
				 										<view  slot="title" class="u-slot-title">
				 											<text class="u-cell-text">装货日期</text>
				 											<text class="u-cell-text">{{basinfo.loadingDate}}</text>
				 										</view>
				 									</u-cell>
				 									<u-cell>
				 										<view  slot="title" class="u-slot-title">
				 											<text class="u-cell-text">入库仓库</text>
				 											<text class="u-cell-text">{{basinfo.warehouseName}}</text>
				 										</view>
				 									</u-cell>
				 									<u-cell>
				 										<view  slot="title" class="u-slot-title">
				 											<text class="u-cell-text">是否需要安排车辆</text>
				 											<text class="u-cell-text" v-if="basinfo.whetherLogisticsRequired=='1'">是</text>
				 											<text class="u-cell-text" v-if="basinfo.whetherLogisticsRequired=='2'">否</text>
				 										</view>
				 									</u-cell>
				 									<u-cell>
				 										<view  slot="title" class="u-slot-title">
				 											<text class="u-cell-text">运输方式</text>
				 											<text class="u-cell-text">{{shippingType}}</text>
				 										</view>
				 									</u-cell>
				 									<u-cell>
				 										<view  slot="title" class="u-slot-title">
				 											<text class="u-cell-text">司机姓名</text>
				 											<text class="u-cell-text">{{logisticsList.driverName}}</text>
				 										</view>
				 									</u-cell>
				 									<u-cell>
				 										<view  slot="title" class="u-slot-title">
				 											<text class="u-cell-text">司机联系方式</text>
				 											<text class="u-cell-text">{{logisticsList.driverTel}}</text>
				 										</view>
				 									</u-cell>
				 									<u-cell>
				 										<view  slot="title" class="u-slot-title">
				 											<text class="u-cell-text">车辆信息</text>
				 											<text class="u-cell-text">{{logisticsList.vehicleInformation}}</text>
				 										</view>
				 									</u-cell>
				 									<u-cell>
				 										<view  slot="title" class="u-slot-title">
				 											<text class="u-cell-text">备注</text>
				 											<text class="u-cell-text">{{logisticsList.remark}}</text>
				 										</view>
				 									</u-cell>
				 									</u-cell-group>
				 									<u-cell>
				 										<template #title>
				 											<view style="color:#ccc" class="u-cell-text">系统信息</view>
				 										</template>
				 										
				 									</u-cell>
				 									<u-cell-group>
				 										<u-cell>
				 											<view  slot="title" class="u-slot-title">
				 												<text class="u-cell-text">创建时间</text>
				 												<text class="u-cell-text">{{basinfo.createTime}}</text>
				 											</view>
				 										</u-cell>
				 										<!-- <u-cell>
				 											<view  slot="title" class="u-slot-title">
				 												<text class="u-cell-text">更新时间</text>
				 												<text class="u-cell-text">{{basinfo.updateTime}}</text>
				 											</view>
				 										</u-cell> -->
				 										<u-cell>
				 											<view  slot="title" class="u-slot-title">
				 												<text class="u-cell-text">协同人</text>
				 												<text class="u-cell-text">{{basinfo.collaboratorName}}</text>
				 											</view>
				 										</u-cell>
				 										
				 									</u-cell-group>
				 							</view>
				 							<view class="box" v-if="index*1===1">
				 								<u-cell>
				 									<template #title>
				 										<view class="u-cell-text">红冲回款单</view>
				 									</template>
				 								</u-cell>
				 							</view>
				 							<view class="box" v-if="index*1===2">
				 								<u-cell>
				 									<template #title>
				 										<view class="u-cell-text">关联红冲/作废发票</view>
				 									</template>
				 								</u-cell>
				 							</view>
				 							<view class="box" v-if="index*1===3">
				 								<u-cell>
				 									<template #title>
				 										<view class="u-cell-text">入库记录</view>
				 									</template>
				 									
				 								</u-cell>
				 								<!-- 列表 -->
				 								<view  class="application" v-for="item in returnList" :key="item.id">
				 									<view class="application_one">{{item.returnReceiptNo}}</view>
				 									<view  style="color:#8c8b8a;">发起人：{{item.sponsorName}}</view>
				 											<view  style="color:#8c8b8a;">回货申请单：{{item.returnApplyNo}}</view>
				 									<view style="color: #8c8b8a;">入库日期：{{item.warehousingTime}}</view>
				 									<view style="color: #8c8b8a;">入库仓库：{{item.applyWarehouseName}}</view>
				 											<view class="addapplicaionChild">
				 												<button class="addapplicaionChild"  @click="toawarehouseinfo(item.id)">详情</button>
				 											</view>
				 								</view>
				 							</view>
				 							<view class="box" v-if="index*1===4">
				 								<u-cell>
				 									<template #title>
				 										<view class="u-cell-text">回货产品</view>
				 									</template>
				 								</u-cell>
				 								<uni-table border stripe emptyText="回货产品" >
				 									<!-- 表头行 -->
				 									<uni-tr>
				 										<uni-th align="center">序号</uni-th>
				 										<uni-th align="center">产品名称</uni-th>
				 										<uni-th align="center">型号</uni-th>
				 										<uni-th align="center">产品编号</uni-th>
				 										<uni-th align="center">数量</uni-th>
				 										<uni-th align="center">价格</uni-th>
				 										<uni-th align="center">金额小计</uni-th>
				 										<uni-th align="center">出库单标号</uni-th>
				 										<uni-th align="center">备注</uni-th>
				 									</uni-tr>
				 									<!-- 表格数据行 -->
				 									<uni-tr v-for="(item,index) in basinfo.productList">
				 										<uni-td align="center">{{index}}</uni-td>
				 										<uni-td align="center">{{item.productName}}</uni-td>
				 										<uni-td align="center">{{item.model}}</uni-td>
				 										<uni-td align="center">{{item.productNo}}</uni-td>
				 										<uni-td align="center">{{item.returnQuantity}}</uni-td>
				 										<uni-td align="center">{{item.price}}</uni-td>
				 										<uni-td align="center">{{item.allPrice}}</uni-td>
				 										<uni-td align="center">{{item.outboundNo}}</uni-td>
				 										<uni-td align="center">{{item.remark}}</uni-td>
				 									</uni-tr>
				 									 
				 								
				 								</uni-table>
				 							</view>
				 							<view class="box" v-if="index*1===5">
				 								<u-cell>
				 									<template #title>
				 										<view class="u-cell-text">审批流程</view>
				 									</template>
				 								</u-cell>
				 							</view>
				 							<view class="box" v-if="index*1===6">
				 								<u-cell>
				 									<template #title>
				 										<view class="u-cell-text">审批历史</view>
				 									</template>
				 								</u-cell>
				 							</view>
				 						</u--form>
			 </view>
		   
	</view>
</template>

<script>
	import{getBackWarehouseList} from '@/api/backapplication.js'
		import {getBackwarehouseorderList} from '@/api/backwarehouse.js'
		import {getDicts} from "@/api/dictionary/index.js"
		import {getLogisticsListApi} from '@/api/logistics.js'
	export default {
		data() {
			return {
				list:[],//子级出库申请单
				tablist:[
					{name:'基本信息'},
					{name:'回货产品'},
					 
					 
				],
				index:0,
				// 基础信息
				basinfo:{},
				returnList:[],
				logisticsList:{},//机器的物流信息
				shippingType:'',//运输方式
				shippingTypeOption:[],
			};
		},
		onLoad(e) {
			console.log(e);
			this.initData(e)
			this.getshippingType()
		},
		onBackPress() {
			this.getValue()
			
		},
		
		methods:{
			getValue(){
				console.log('shuaxin');
				this.initData()
			},
			
			async initData(e){
				let res=await getBackWarehouseList(e)
				console.log(res);
				this.list=res.rows[0].childReturnApply
				if(this.list.length==0){
					return false
				}
				 this.basinfo=this.list[0]
				 console.log(this.basinfo.returnApplyNo);
				 
				 const {rows}=await getLogisticsListApi({returnApplyNo:this.basinfo.returnApplyNo})
				 console.log(rows);
				 if(rows.length !==0){
				 	this.logisticsList=rows[0]
				 	this.shippingType=this.getValue1(this.shippingTypeOption,rows[0].shippingType)
				 }
				
			},
			getValue1(arr,item){
				for(var i=0;i<arr.length;i++){
					if(arr[i].dictValue==item){
						return arr[i].dictLabel
					}
				}
			},
			
			// 返回上一级
			backFn(){
				uni.redirectTo({
					url:"/pages/backapplication/backapplication"
				})
			},
			updateLogistics(item){
				console.log(item);
				uni.navigateTo({
					url:'/pages/logistic/addBacklogistic/addBacklogistic?item='+encodeURIComponent(JSON.stringify(item))
				})
			},
			//根据index查询
			 async getinfo(index,item){
				  console.log(index,item);
				  this.basinfo=this.list[index]
				  // 再次获取其他的物流信息
				  const {rows}=await getLogisticsListApi({returnApplyNo:this.basinfo.returnApplyNo})
				  console.log(rows);
				  if(rows.length !==0){
				  	this.logisticsList=rows[0]
				  	this.shippingType=this.getValue1(this.shippingTypeOption,rows[0].shippingType)
				  }
				  
			  },
			  // 获取运输方式
			  getshippingType(){
			     getDicts('biz_shipping_type').then(response=>{
			  	   // console.log(response);
			  	   this.shippingTypeOption=response.data
			     })
			  },
			  toawarehouseinfo(id){
			  	uni.navigateTo({
			  		url:'/pages/backwarehouse/backwarehouseinfo/backwarehouseinfo?id='+id
			  	})
			  },
			  // tab栏切换
			async  changeFn(e){
				  console.log(e);
				  this.index=e.index
				  if(this.index==3){
					  let res1=await getBackwarehouseorderList({returnApplyNo:this.basinfo.returnApplyNo})
					  // console.log(res1);
					  this.returnList=res1.rows
					  console.log(this.returnList);
				  }
			  }
			
		}
		
	}
</script>

<style lang="scss">
 .application{
		  background-color: #fff;
		 
		  .application_one{
			  border-bottom: 1px solid #ccc;
			  padding: 10px;
			  font-size: 16px;
			  .title{
				  font-size: 12px;
				  margin-top: 5px;
			  }
		  }
		  .Buttom{
		  	 display: flex;
		  	 justify-content: space-between;
		  	min-height: 35px;
		  			 background-color: #fff;	
		   .left{
		  		width: 50%;
		  		height: 35px;
		  		line-height: 35px;
				margin-left: 15px;
		  		.icon,.name{
		  		vertical-align:middle;
		  		 }
		  		.name{
		  		padding-left: 10px;
				font-size: 14px;
		  		}
		  		 
		  		}
		  		
		  }
	  }
	  .sumdata{
	  	background-color: #fff;
	  	margin-top: 13px;
	  	.top{
	  		padding-top: 5px;
	  		padding-bottom: 40px;
	  		height: 30px;
	  		line-height: 30px;
	  		.icon,.name{
	  			vertical-align:middle;
	  		}
	  	}
	  	.swiper{
	  		.text{
	  			min-height:  100px;
	  			width: 100px;
	  			background-color: #f5efef;
	  			margin-right: 5px;
	  			text-align: center;
	  			display: flex;
	  			flex-direction: column;
	  			justify-content: space-around;
	  			border-radius: 10px;
	  			span{
	  				 display: block;
	  				 padding-top: 10px;
	  				 color: #8b8b8b;
	  			}
	  		}
	  	}
	  }
	  .tabs{
	  	background-color: #fff;
	  }
	  .orderdetails{
	  	background-color: #fff;
		.u-slot-title{
			.u-cell-text{
				margin-right: 15px;
			}
		}
		.application{
				  min-height: 120px;
				  position: relative;
				  background-color: #fff;
				  border-bottom: 1px solid #ccc;
				  padding-top: 10px;
				  padding-left: 15px;
				  padding-bottom: 10px;
				  .application_one{
					  font-size: 18px;
				  }
				  
				 .addapplicaionChild{
				  	width: 70px;
				  	height: 25px;
				  	line-height: 25px;
				  	font-size: 12px;
				  	text-align: center;
				  	color: #ff7c0a;
				  	background-color: #fff;
				  	position: absolute;
				  	top: 20px;
				  	right: 10px;
				  	 
				    }
					 
			  }
	  }
	  
</style>
